<template>
  <div class="con-top">
    <!-- 筛选 -->
    <el-card class="box-card">
      <div class="header">
        <div class="left">
          <el-icon><Search /></el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="right">
          <el-button type="default" @click="resetBtn">
            重置
          </el-button>
          <el-button type="primary" @click="getApiRoleList">
            查询搜索
          </el-button>
        </div>
      </div>
      <div class="container">
        <span>角色名称：</span>
        <el-input
          placeholder="请输入角色名称"
          v-model="roleParams.keyword"
          @keyup.enter="getApiRoleList"
        />
      </div>
    </el-card>
    <!-- 筛选 -->

    <!-- 数据列表 -->
    <el-card class="box-two">
      <div class="left">
        <el-icon><Tickets /></el-icon>
        <span>数据列表</span>
      </div>
      <el-button type="primary" @click="isShow = true" v-permission="'addRole'">
        添加
      </el-button>
    </el-card>
    <!-- 数据列表 -->

    <!-- 表格渲染 -->
    <el-table :data="tableList" style="width: 100%;" border table-layout="auto">
      <el-table-column align="center" prop="id" label="编号" />
      <el-table-column align="center" prop="name" label="角色名称" />
      <el-table-column align="center" prop="description" label="描述" />
      <el-table-column align="center" prop="adminCount" label="用户数" />
      <el-table-column align="center" prop="address" label="添加时间">
        <template #default="{row}">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="是否启用">
        <template #default="{row}">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="{row}">
          <el-button
            text
            type="primary"
            v-permission="'allocMenu'"
            @click="allocMenuBtn(row.id)"
          >
            分配菜单
          </el-button>
          <el-button
            text
            type="primary"
            v-permission="'allocResource'"
            @click="router.push(`allocResource?id=${row.id}`)"
          >
            分配资源
          </el-button>
          <el-button
            text
            type="primary"
            @click="ediRoleUser(row)"
            v-permission="'editRole'"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格渲染 -->

    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="roleParams.pageNum"
        v-model:page-size="roleParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getApiRoleList"
        @current-change="getApiRoleList"
      />
    </ElConfigProvider>
    <!-- 分页 -->
  </div>

  <!-- 添加用户对话框 -->
  <RoleDialogVue
    :isShow="isShow"
    @defaultFn="defaultFn"
    :editRoleUserParams="editRoleUserParams.data"
  />
</template>
<script setup lang="ts">
import { Search, Tickets } from '@element-plus/icons-vue'
import { ApiRoleList, ApiRoleUpdateStatus } from './api'
import { ref, reactive } from 'vue'
import { formatDate } from '@/utils/index'
import { ElConfigProvider, ElMessage } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import RoleDialogVue from './components/roleDialog.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const tableList = ref<IRoleListData[]>([])
const total = ref<number>(0)

// 表格请求参数
const roleParams = reactive<IUserParams>({
  keyword: '',
  pageNum: 1,
  pageSize: 10,
})

// 添加用户对话框显隐
const isShow = ref<boolean>(false)

// 表格数据请求
const getApiRoleList = () => {
  ApiRoleList(roleParams).then((res) => {
    if (res.code === 200) {
      // console.log(res)
      tableList.value = res.data.list
      total.value = res.data.total
    }
  })
}

// 重置按钮
const resetBtn = () => {
  roleParams.keyword = ''
  roleParams.pageNum = 1
  roleParams.pageSize = 10
}

// 启用按钮
const changeStatus = (row: IRoleListData) => {
  ApiRoleUpdateStatus(row.id, row.status)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success('修改成功！')
      } else {
        row.status = row.status == 1 ? 0 : 1
      }
    })
    .catch(() => {
      row.status = row.status == 1 ? 0 : 1
    })
}

interface IData {
  id: number
  name: string
  description: string
  status: number
}

type IInfo = { data: IData }

const editRoleUserParams = reactive<IInfo>({
  data: {
    id: 0,
    name: '',
    description: '',
    status: 0,
  },
})

// 子组件数据恢复
const defaultFn = (val?: boolean) => {
  if (val) {
    getApiRoleList()
  }
  isShow.value = false
  editRoleUserParams.data.id = 0
  editRoleUserParams.data.description = ''
  editRoleUserParams.data.name = ''
  editRoleUserParams.data.status = 0
}

// 编辑按钮
const ediRoleUser = (row: IRoleListData) => {
  editRoleUserParams.data.id = row.id
  editRoleUserParams.data.name = row.name
  editRoleUserParams.data.description = row.description
  editRoleUserParams.data.status = row.status

  isShow.value = true
}

// 分配菜单按钮
const allocMenuBtn = (id: number) => {
  router.push(`allocMenu?id=${id}`)
}

// 页面初始化请求数据
getApiRoleList()
</script>
<style lang="less" scoped>
.box-card {
  margin-top: 20px;
  .header {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
        font-size: 14px;
      }
    }
    .right {
      display: flex;
      .el-button--default {
        margin-right: 5px;
      }
    }
  }
  .container {
    display: flex;
    padding-top: 20px;
    padding-left: 40px;
    align-items: center;
    .el-input {
      width: 190px;
    }
  }
}

.box-two {
  margin: 20px 0;

  .left {
    display: flex;
    align-items: center;
    span {
      margin-left: 10px;
      font-size: 14px;
    }
  }
  :deep(.el-card__body) {
    display: flex;
    justify-content: space-between;
  }
}

:deep(.el-pagination) {
  margin: 20px;
  float: right;
}
</style>
